<script lang="ts" setup>
import { computed, ref } from '@vue/reactivity';
import { PropType } from '@vue/runtime-core';
import { useStore } from '_vuex@4.0.2@vuex';
import { key } from '../store/'

defineProps({
    title: {
        type: Object as PropType<TitleType>,
        required: true
    }
})

const store = useStore(key)
const count = computed(() => store.state.count)
const doubleCount = computed(() => count.value * 2)

store.dispatch('todos/initTodos')
const items = computed(() => store.state.todos?.todos)

const todoName = ref('')
const newTodo = (todoName: string): TodoType => {
    return {
        id: String(Math.random()),
        name: todoName,
        compledted: false
    }
}
const addTodo = (todo: TodoType): void => {
    store.commit('todos/addTodo', todo)
    todoName.value = ''
}

</script>

<template >
    <div class="comp">
        <h2 :style="{ 'color': title.color }">{{ title.name }}</h2>
        <p @click="$store.commit('add')">count: {{ count }}</p>
        <p>doubleCount: {{ doubleCount }}</p>
        <input type="text" v-model="todoName" @keydown.enter="addTodo(newTodo(todoName))" />
        <ul>
            <li v-for="item in items" :key="item.id">{{ item.name }}</li>
        </ul>
    </div>
</template>

<style scoped>
.comp {
    text-align: left;
}
</style>